:root[theme='dark']{
	--background-color: #000000;
	--secondary-background-color: #ffffff;
  --background-color-transparent:rgba(0, 0, 0, 0.2);

  --font-size:14px;
  --font-color:#ffffff;

  /*主题切换按钮*/
  --theme-button-size:32px;
}

:root[theme='light']{
	--background-color: #ffffff;
	--secondary-background-color: #000000;
  --background-color-transparent:rgba(0, 0, 0, 0.2);

  --font-size:14px;
  --font-color:#000000;

  /*主题切换按钮*/
  --theme-button-size:32px;
}

:root{
	--background-color: #1982cc;
	--secondary-background-color: #f7f7f7;
  --background-color-transparent:rgba(0, 0, 0, 0.2);

  --font-size :14px;
  --font-color:#000000;
  --menubar-height: 48px;
	--side_width:250px;
	--monitor_height:220px;

  /*主题切换按钮*/
  --theme-button-size:32px;
}

body{
	font-family: Helvetica, Arial, sans-serif;
	font-size: var(--font-size);
  color: var(--font-color);
	margin: 0;
	overflow: hidden;
  background-color: var(--background-color);
}

.theme-button{
  position: absolute;
  background-color:var(--background-color-transparent);
  border: none;
  color: var(--font-color);
  width:var(--theme-button-size);
  height: var(--theme-button-size);
  top: 0px;
  right: 0px;
  overflow: hidden;
}

.theme-button:hover{
  cursor: pointer;
}

.Panel{
  -moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

  user-select: none;
}

#menubar {
	position: absolute;
	width: 100%;
	height: var(--menubar-height);
	background: #eee;
	padding: 0;
	margin: 0;
	right: 0;
	top: 0;
}

	#menubar .menu {
		float: left;
		cursor: pointer;
		padding-left: 8px;
	}

	#menubar .menu.right {
		float: right;
		cursor: auto;
		padding: calc(var(--menubar-height)/4) 0px calc(var(--menubar-height)/4) 0px;
    line-height: calc(var(--menubar-height)/2);
		text-align: right;
	}

		#menubar .menu .title {
			display: inline-block;
			color: #888;
			margin: 0;
			padding: calc(var(--menubar-height)/4) 0px calc(var(--menubar-height)/4) 0px;
			line-height: calc(var(--menubar-height)/2);
		}

		#menubar .menu .options {
			position: fixed;
			display: none;
			padding: 5px 0;
			background: #eee;
			/* width: 150px; */
			max-height: calc(100% - 80px);
			overflow: auto;
		}

		#menubar .menu:hover .options {
			display: block;
		}

			#menubar .menu .options hr {
				border-color: #ddd;
			}

			#menubar .menu .options .option {
				color: #666;
				background-color: transparent;
				padding: 5px 10px;
				margin: 0 !important;
			}

				#menubar .menu .options .option:hover {
					color: #fff;
					background-color: #08f;
				}

				#menubar .menu .options .option:active {
					color: #666;
					background: transparent;
				}

        #menubar .menu .options .inactive {
          color: #bbb;
          background-color: transparent;
          padding: 5px 10px;
          margin: 0 !important;
        }

#container{
	position: absolute;
	left:var(--side_width);
}

.side{
	position: absolute;
	top:var(--menubar-height);
}
	.side label{
		font-size:x-small;
		color: #861209;
	}
	.side .monitor{
		margin: 0px;
		height: var(--monitor_height);
		width: var(--side_width);
		/* border: 1px solid gray; */
	}

.div-fullscreen #container{
	text-align: center;
	position: absolute;
	left: 0px;
}